import React from 'react'
import { CapsuleTabs } from 'antd-mobile'
import "./Goodslist.less"

export default function Goodslist(props) {
  let arr = ["新品上架","正在热销","好物推荐","促销热卖"]
  let {changeindex,goodslist,n} = props;
  console.log(props);
  return (
    <div>
      <CapsuleTabs onChange={(index)=>changeindex(index)}>
          {arr.map((item,index)=>{
            return(
            <CapsuleTabs.Tab title={item} key={index} >
            {goodslist.length>0? goodslist[Number(n)].content.map((i)=>{
              return(
                <div className='goodbox' key={i.id}>
                  <div className='left'>
                    <img src={'http://localhost:1000'+i.img} alt="" />
                  </div>
                  <div className='right'>
                    <p>{i.goodsname}</p>
                    <p>{i.price}</p>
                    <div>加入购物车</div>
                  </div>
                </div>
              )
            }) : null}
          </CapsuleTabs.Tab>
            )
          })}
        </CapsuleTabs>
    </div>
  )
}
